import React, { Dispatch, SetStateAction } from 'react'
import { Drawer, Timeline } from 'antd'
import { inject, observer } from 'mobx-react'

import '../../../config/dark-theme.less'
import HomeStore from '../../../stores/HomeStory'
interface OrderTimeLineProps {
  visible: boolean
  setVisible: Dispatch<SetStateAction<boolean>>
  HomeStore: HomeStore
  orderId: string
}

const OrderTimeLine: React.FC<OrderTimeLineProps> = (
  props: OrderTimeLineProps
) => {
  const { visible, setVisible, orderId } = props
  const onClose = () => {
    setVisible(false)
  }
  return (
    <Drawer
      title={orderId}
      placement='right'
      onClose={onClose}
      visible={visible}
      width={400}
    >
      <Timeline>
        <Timeline.Item color='green'>
          Create a services site 2015-09-01
        </Timeline.Item>
        <Timeline.Item color='green'>
          Create a services site 2015-09-01
        </Timeline.Item>
        <Timeline.Item color='red'>
          <p>Solve initial network problems 1</p>
          <p>Solve initial network problems 2</p>
          <p>Solve initial network problems 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item color='gray'>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item color='gray'>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
      </Timeline>
    </Drawer>
  )
}

export default inject('HomeStore')(observer(OrderTimeLine))
